<!DOCTYPE html>
<html>
  <head>
    <!-- 渲染属性 -->
    <!-- <script src="node_modules/three/build/three.js"></script> -->
    <script type="importmap">
      {
        "imports": {
          "three": "./node_modules/three/build/three.module.js",
          "three/addons/": "./node_modules/three/examples/jsm/"
        }
      }
    </script>
    <script type="module">
      import * as THREE from "three";

      // 引入dat.gui.js的一个类GUI
      import { GUI } from "three/addons/libs/lil-gui.module.min.js";
      // 浏览器控制台测试，是否引入成功
      console.log(THREE.Scene);
      console.log("完成");
      const width = window.innerWidth;
      const height = window.innerHeight;

      // 开始创建
      // 设置场景,坐标原小 0，0，0 中场景中央
      const scene = new THREE.Scene();

      // 实例化一个gui对象
      const gui = new GUI();

      //创建一个空的几何体对象
      const geometry = new THREE.BufferGeometry();

      const vertices = new Float32Array([
          0, 0, 0, //顶点1坐标
          80, 0, 0, //顶点2坐标
          80, 80, 0, //顶点3坐标
          0, 80, 0, //顶点4坐标
      ]);

      // Uint16Array类型数组创建顶点索引数据
      const indexes = new Uint16Array([
          // 下面索引值对应顶点位置数据中的顶点坐标
          0, 1, 2, 0, 2, 3,
      ]);

      // 索引数据赋值给几何体的index属性
geometry.index = new THREE.BufferAttribute(indexes, 1); //1个为一组

      // 创建属性缓冲区对象
      //3个为一组，表示一个顶点的xyz坐标，因为 vertices 是一维数据，所以需要告诉构造方法，怎么分组
      const attribue = new THREE.BufferAttribute(vertices, 3);

      // 设置几何体attributes属性的位置属性
      geometry.attributes.position = attribue;

      const material = new THREE.MeshLambertMaterial({
          color: 0x00ffff, //材质颜色
          side: THREE.FrontSide, //默认只有正面可见
      });


      const mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);
      
      // 现在已经把几何体放到场景中了，但还需要一只眼睛
      // 这是一个透视摄像机
      // 第一个参数，视角，视角越大，看的东西越多，相对就越小。
      // 第二个参数，宽高比例
      // 第三个参数，当被观测物体的边界小于这个值时，不可见。，如果，在10 的位置，物体高为 10，那么物体就顶天立地
      // 第四个参数，当被观测物体的边界大于这个值时，不可见。
      const camera = new THREE.PerspectiveCamera(50, width / height, 10, 1000);

      // 设置摄像机的位置
      camera.position.set(0, 200, 500);

      // 设置摄像机的观察点
      camera.lookAt(0, 0, 0);

      // 摄像机从 x -12 向 x 0 方向观察
      console.log(`camera`, camera.position);

      // 设置渲染器
      const renderer = new THREE.WebGLRenderer();

      renderer.setSize(width, height);

      // 设置空间背景颜色
      renderer.setClearColor(0xcccccc);
      renderer.render(scene, camera);

      document.body.appendChild(renderer.domElement);

      // 渲染方法
      function render() {
        // 用渲染器渲染
        renderer.render(scene, camera);

        // 重复渲染，需要查一下
        // 请求动画帧
        // requestAnimationFrame实现周期性循环执行
        // requestAnimationFrame默认每秒钟执行60次，但不一定能做到，要看代码的性能
        requestAnimationFrame(render); // 请求再次执行函数render, 放上面下面都行
      }

      // 执行渲染方法
      render();
    </script>
  </head>
  <body>
    GUI 控件
    <div id="monitor"></div>
  </body>
</html>
